<!DOCTYPE html>
<html>
  <head>
    {include file="common/meta" /}
  </head>
  
  <body class="form-wrap" >
    <div class="layui-fluid">
      <div class="layui-card">
        <div class="layui-card-header">添加系统配置</div>
        <div class="layui-card-body" style="padding: 15px;">
          <form class="layui-form" method="post" enctype="multipart/form-data">
            <!-- 配置的标题 -->
            <div class="layui-form-item">
              <label class="layui-form-label" style="width:130px;">配置的标题</label>
              <div class="layui-input-block layui-col-lg4" style="margin-left:0;">
                <input type="text" name="title" placeholder="请输入配置标题" required class="layui-input" />
              </div>
            </div>

            <!-- 配置的名称 -->
            <div class="layui-form-item">
              <label class="layui-form-label" style="width:130px;">配置的名称</label>
              <div class="layui-input-block layui-col-lg4" style="margin-left:0;">
                <input type="text" name="key" placeholder="配置的名称" required class="layui-input" />
              </div>
            </div>

            <!-- 配置的类型 -->
            <div class="layui-form-item">
              <label class="layui-form-label" style="width:130px;">配置的类型</label>
              <div class="layui-input-block layui-col-lg4" style="margin-left:0;">
                <select name="type" lay-verify="required" lay-filter="type">
                  <option value="text">文本</option>
                  <option value="file">文件</option>
                </select>
              </div>
            </div>

            <!-- 配置的值 文本类型 -->
            <div class="layui-form-item" id="text">
              <label class="layui-form-label" style="width:130px;">配置的值(文本类型)</label>
              <div class="layui-input-block layui-col-lg4" style="margin-left:0;">
                <input type="text" name="value" placeholder="配置的值" class="layui-input" />
              </div>
            </div>

            <div class="layui-form-item" id="file" hidden>
              <label class="layui-form-label" style="width:130px;">
                配置的值(文件类型)
              </label>
              <div class="layui-input-block layui-col-lg4" style="margin-left:0;">
                <div class="layui-upload">
                  <button type="button" class="layui-btn" id="type">
                    上传文件
                  </button>
                  <div class="layui-upload-list">
                    <!-- 预览图片 -->
                    <img class="layui-upload-img" id="preview" />
                  </div>
                </div>   
              </div>
            </div>
            
            <!-- 提交 -->
            <div class="layui-form-item">
              <div class="layui-input-block">
                <div class="layui-footer" style="left: 0;">
                  <button class="layui-btn">提交</button>
                  <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </body>
</html>
<script>
  //参数1：引入内置的功能模块
  // 参数2: 自动触发 当引入模块成功后 自动调用的回调函数
  layui.use(['layer', 'jquery', 'form', 'upload'], function(){
    var layer = layui.layer
    var form = layui.form
    var $ = layui.jquery
    var upload = layui.upload

    form.on('select(type)', function(data){
      var type = data.value
      
      if(type == "text")
      {
        //选择的文本类型
        $(`#text`).removeAttr('hidden')
        $(`#file`).attr('hidden', true)

      }else if(type == "file")
      {
        //选择的文件类型
        $(`#file`).removeAttr('hidden')
        $(`#text`).attr('hidden', true)
      }
    })

    //文件上传,并提交表单
    var uploadInst = upload.render({
      elem: '#type', //关联的dom元素
      auto:false, //不要自动上传
      file:"file",  //设置文件的字段名称

      choose: function(obj){  //选择文件后的回调函数
        //预读本地文件示例，不支持ie8
        obj.preview(function(index, file, result){
          //给图片设置src显示属性
          $('#preview').attr('src', result); //图片链接（base64）
        })
      }
    });
  })
  
</script>